import { useNavigate } from "umi"
import ItemCard from "@/components/ItemCard"
import { Card, Col, Row } from "antd"
import { isString } from "antd/es/button"

const data: any[] = [
  {
    id: 1,
    title: 'GPT机器人',
    description: '该项目使用NextGPTWeb开源项目，对外开放功能更新中',
    redirectUrl: '/tools/gpt',
    pic: 'https://z1.ax1x.com/2023/12/05/pi6R1hR.png'
  },
  {
    id: 2,
    title: 'Twine剧本转配置工具',
    description: '基于Twine设计的剧情故事策划文件，可直接导出html转为csv配置表',
    redirectUrl: '/tools/twine-tool',
    pic: 'https://z1.ax1x.com/2023/12/05/pi6RuBF.png'
  }
]

const ChatGptPage = () => {
  const navigator = useNavigate()

  const handleClickItem = (item: any) => {
    console.log("click item: ", item)
    if (isString(item)) {
      navigator(item)
    } else if (isString(item.redirectUrl)) {
      navigator(item.redirectUrl)
    }
  }

  return <>
    <Card>
      工具板块
    </Card>
    <Card>
      <Row gutter={[16, 16]}>
        {data?.map((item, idx) => {
          return <Col xs={24} sm={12} md={8} lg={6} xl={6} key={idx}>
          <ItemCard {...item} onClick={()=>handleClickItem(item)}></ItemCard>
        </Col>
        })}
      </Row>
    </Card>
    {/* <ProCard
      gutter={[{ xs: 8, sm: 8, md: 16, lg: 24, xl: 32 }, 16]}
      style={{ marginBlockStart: 16 }}
    >
      
      <ProCard style={{ maxWidth: 300 }} hoverable bordered onClick={handleClickGptTool}>
        GPT机器人
      </ProCard>
      <ProCard style={{ maxWidth: 300 }} hoverable bordered onClick={handleClickTwineTool}>
        Twine剧本转配置表
      </ProCard>
    </ProCard> */}
  </>
}

export default ChatGptPage